<template>
	<view class="universal-detail">
		<view class="universal-detail-top">
			<view class="universal-detail-top-time">
				<text class="universal-detail-top-title">调度执行</text>
				<!-- {{ model.finishTime }} -->
			</view>
			<view class="universal-detail-top-username">执行人：{{ model.feedback?.processorName || '-' }}</view>
		</view>

		<view class="universal-detail-cont">
			<view class="universal-detail-item">
				<view class="universal-detail-item-title">执行反馈：</view>
				<view class="universal-detail-item-cont">{{ model.feedback?.feedbackDetail }}</view>
				<!-- <van-text-ellipsis class="universal-detail-item-cont" :content="model.executiveFeedback" /> -->
			</view>
			<view class="universal-detail-item">
				<view class="universal-detail-item-title">完成时间：</view>
				<view class="universal-detail-item-cont">{{ model.feedback?.completeTime }}</view>
			</view>
			<view class="universal-detail-item">
				<view class="universal-detail-item-title">实灌总量：</view>
				<view class="universal-detail-item-cont">{{ model.feedback?.totalFillWater }}m³</view>
			</view>
			<view class="universal-detail-item">
				<view class="universal-detail-item-title">照片：</view>
				<view class="universal-detail-list">
					<image v-for="(image, index) in model.imagesUrl" :src="image.url" mode="aspectFit"
						@click="handleImagePreview(image.url, index)" class="universal-detail-list-image"></image>
				</view>
			</view>
			<view class="universal-detail-item">
				<view class="universal-detail-item-title">视频：</view>
				<view class="universal-detail-list">
					<video-preview v-for="(image, index) in model.videosUrl" :src="image.url" />
					<view v-if="!model.videosUrl?.length">-</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		showImagePreview
	} from 'vant';

	const model = defineModel();

	const handleImagePreview = (imageUrl, index) => {
		showImagePreview({
			images: [imageUrl],
			startPosition: index,
			closeOnClickImage: false,
		})
	}
</script>

<style lang="scss" scoped>
	@import '@/assets/universal-detail.scss';

	.detail {
		.universal-detail {
			.universal-detail-item {
				width: 100%;
			}
		}
	}
</style>